<template>
  <!--@mousedown.stop-->
  <!--@touchstart.stop-->
  <div class="Button"
       :class="[type,{active}]" @click="$emit('click',$event)">
    <div class="Icon" :style="{color:active?activeColor:color}" v-html="svg[name]"></div>
  </div>
</template>

<script>
  import svg from "@/assets/svg";

  export default {
    props: {
      type: String,
      name: String,
      activeColor: String,
      active: Boolean,
      color: String,
    },
    data() {
      return {
        svg
        // btnList: [
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/panel.svg')),
        //     type: 'toggleElementButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/pan.svg')),
        //     type: 'toolButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/arrow.svg')),
        //     type: 'actionButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/continuousPageTransition.svg')),
        //     type: 'actionButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/coverLayout.svg')),
        //     type: 'actionButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/defaultPageTransition.svg')),
        //     type: 'actionButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/doubleLayout.svg')),
        //     type: 'actionButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/ellipse.svg')),
        //     type: 'actionButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/eraser.svg')),
        //     type: 'actionButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/freeHand.svg')),
        //     type: 'actionButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/freeText.svg')),
        //     type: 'actionButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/highlight.svg')),
        //     type: 'actionButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/line.svg')),
        //     type: 'actionButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/pen.svg')),
        //     type: 'actionButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/rectangle.svg')),
        //     type: 'actionButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/rotateClockwise.svg')),
        //     type: 'actionButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/rotateCounterClockwise.svg')),
        //     type: 'actionButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/search.svg')),
        //     type: 'actionButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/select.svg')),
        //     type: 'actionButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/setting.svg')),
        //     type: 'actionButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/zoomin.svg')),
        //     type: 'actionButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/zoomout.svg')),
        //     type: 'actionButton'
        //   },
        //   {
        //     id: uuid(),
        //     name: 'hand',
        //     label: '',
        //     icon: decodeBase64(require('@/assets/img/zoomOverlay.svg')),
        //     type: 'actionButton'
        //   }
        // ],
        // scaleType: 'page-width',// page-fit  page-width
        // html: ''
      }
    },
    async mounted() {
      // let r = await import(`../../../${this.src}`)
      // this.html = decodeBase64(r)
    }
  };
</script>
